<template>
  <div class="template">
    <a-card class="container" :title="t['选择模板']">
      <template #extra>
        <div class="flex gap-2">
          <a-button size="mini" @click="swapSort">
            <icon-swap />
          </a-button>
          <a-button size="mini" @click="list"> <icon-refresh /></a-button>
        </div>
      </template>
      <a-pagination
        class="mb-2"
        :page-size="templateQuery.pageSize"
        :current="templateQuery.pageNum"
        :total="templateQuery.total!"
        @change="pageChange"
        @page-size-change="pageSizeChange"
      >
      </a-pagination>
      <a-spin class="w-full" :loading="loading">
        <a-grid :cols="2" :col-gap="4" :row-gap="4">
          <a-grid-item
            v-for="item in templateList"
            :key="item.templateId"
            @click="selectItem(item)"
          >
            <a-card :class="{ active: item.templateId === currentComponent?.id }">
              <template #cover>
                <x-image height="80" :src="item.imgSrc" style="object-fit: contain"></x-image>
              </template>
              <a-card-meta :title="item.templateName">
                <template #description>
                  {{ JSON.parse(item.templateData).stage.w }}
                  x
                  {{ JSON.parse(item.templateData).stage.h }}
                </template>
              </a-card-meta>
            </a-card>
          </a-grid-item>
        </a-grid>
      </a-spin>
    </a-card>
  </div>
</template>

<script setup lang="ts">
import { listThemeComponents } from "@/api/service/theme-coms/theme.coms";
import { ThemeComponents } from "@/api/service/theme-coms/types";
import { Message } from "@arco-design/web-vue";
import { nanoid } from "nanoid";

import { ENUM_DATA_SCOPE, ENUM_MAJOR } from "@/enum/system.enum";

import { IQuery } from "@/interface/IAxios";
import { themForm } from "../../data/form";
import { getMaxIndex } from "../data/actions";
import { componentList, currentComponent } from "../data/data";
import { DragBox } from "../data/types";

const templateList = ref<ThemeComponents[]>([]);

const t = translate("公共模块");
const loading = ref(false);
const templateQuery = ref<IQuery>({
  pageNum: 1,
  pageSize: 10,
  total: 0,
  major: ENUM_MAJOR.MAIN,
  isAsc: "asc",
  orderByColumn: "create_time",
  scope: ENUM_DATA_SCOPE.THIS_SHOP
});
const swapSort = () => {
  templateQuery.value.isAsc = templateQuery.value.isAsc === "asc" ? "desc" : "asc";
  list();
};
const list = async () => {
  loading.value = true;
  const data = await listThemeComponents(templateQuery.value);
  templateList.value = data.rows;
  templateQuery.value.total = data.total;
  loading.value = false;
};
/**
 * @description:
 *  1.往画布里面添加组件
 * @param {*} item
 */
const selectItem = (item: ThemeComponents) => {
  const data = JSON.parse(item.templateData);
  if (data.stage.w > themForm.value.width! || data.stage.h > themForm.value.height!) {
    Message.warning(t.value?.[`组件过大`]);
    return;
  }

  const target = componentList.value.find((e) => {
    if (e.placeholders) {
      return e.placeholders;
    }
    return false;
  });
  if (target && data.stage.placeholders) {
    Message.warning(t.value?.[`已存在视频组件,无法添加`]);
    return;
  }

  const newItem: DragBox = {
    x: 0,
    y: 0,
    w: data.stage.w,
    h: data.stage.h,
    templateId: item.templateId,
    imageSrc: item.imgSrc,
    id: nanoid(),
    draggable: false,
    resizable: false,
    productIds: [],
    name: item.templateName,
    z: getMaxIndex() || 0 + 1,
    version: 1.0,
    scale: 1,
    placeholders: false
  };
  newItem.placeholders = data.stage.placeholders;
  componentList.value.push(newItem);
  currentComponent.value = newItem;
};

const pageChange = (num: number) => {
  templateQuery.value.pageNum = num;
  list();
};
const pageSizeChange = (size: number) => {
  templateQuery.value.pageSize = size;
  list();
};

onMounted(() => {
  list();
});
</script>

<style lang="scss" scoped>
.template {
  width: 400px;
}

:deep(.arco-card) {
  height: 100%;
}

.container {
  & > :deep(.arco-card-body) {
    padding: 4px;
  }
}

.active {
  border: 1px solid var(--primary);
}
</style>
